<template>
  <div>
    <el-dialog :class="{ 'dynamic-dialog': isDynamic }" v-model="dialogVisible" :title="config.title"
      :width="isDynamic ? '860' : '500'" :show-close="false" :close-on-click-modal="false"
      :close-on-press-escape="false" align-center>
      <template #header>
        <SvgIcon v-if="!isDynamic" icon="warning" :size="16"></SvgIcon>
        <span>{{ config.title }}</span>
      </template>
      <div class="message">{{ config.message }}</div>
      <NodeTree v-if="isDynamic" class="node-tree" :data="(config.result as nodeItem[]) || []" />
      <template #footer>
        <div class="dialog-footer">
          <el-button v-if="config.tipDialogType === 'QuestionDialog'" @click="handleCallback(false)"
            :disabled="cancelLoading || submitLoading" :loading="cancelLoading">取消</el-button>
          <el-button type="primary" @click="handleCallback(true)" :disabled="cancelLoading || submitLoading"
            :loading="submitLoading">
            {{ isDynamic ? "提交" : "确认" }}
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import { dialogCallback } from "../../api/test/index";
import type { DialogParams } from "../../api/test/index.d";
import { NodeTree } from "mctp-platform/src/components/index";
import type { nodeItem } from "mctp-platform/src/components/index";
const dialogVisible = defineModel();
const props = withDefaults(defineProps<{ config: Partial<DialogParams>; taskId: string }>(), {
  config: () => ({}),
  taskId: ""
});
const emits = defineEmits(["Close"]);
const cancelLoading = ref(false);
const submitLoading = ref(false);
const handleCallback = async (bol: boolean) => {
  try {
    bol ? (submitLoading.value = true) : (cancelLoading.value = true);
    const params = {
      dialogInfo: (isDynamic.value ? props.config : { ...props.config, result: bol }) as DialogParams
    };
    await dialogCallback(params, { taskId: props.taskId });
    dialogVisible.value = false;
    emits("Close");
  } finally {
    if (bol) {
      submitLoading.value = false;
    } else {
      cancelLoading.value = false;
    }
  }
};
const isDynamic = computed(() => {
  return props.config.tipDialogType === "DynamicFormDialog";
});
</script>

<style lang="scss" scoped>
:deep(.el-dialog) {
  padding: 20px;

  &.dynamic-dialog {
    padding: 0;

    .el-dialog__header {
      padding: 16px 20px;
      border-bottom: 1px solid #eaeaea;
    }

    .el-dialog__body {
      padding: 20px 20px 30px;
    }

    .el-dialog__footer {
      padding: 9px 20px;
      border-top: 1px solid #eaeaea;
    }
  }

  .el-dialog__header {
    font-size: 14px;
    font-weight: 600;
    color: #333;

    .svg-icon {
      margin-right: 6px;
    }
  }

  .el-dialog__body {
    .message {
      padding-bottom: 20px;
    }
  }
}
</style>
